<template>
  <el-dialog title="申请加入已有企业" :visible.sync="isVisible" @close="handleClose" width="800px">
    <el-input
      placeholder="请输入过滤的企业名称"
      v-model="form.companyName"
      @keyup.native.enter="handleFilter"
    >
      <el-button slot="append" icon="el-icon-search" @click="handleFilter"></el-button>
    </el-input>
    <el-table
      ref="companyTable"
      :data="tableData"
      height="400"
      border
      style="width: 100%; margin-top: 20px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="companyNickName" label="企业名称" width="150"> </el-table-column>
      <el-table-column prop="city" label="所在城市" width="120"> </el-table-column>
      <el-table-column prop="deptName" label="归属运营商"> </el-table-column>
    </el-table>
    <span style="color: #8c939d">已选择企业: {{ companyNames.join('，') }}</span>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleJoinCompany">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getAllCompany } from '@/api/enterprise';
import { joinCompany } from '@/api/user/user';
export default {
  props: {
    isVisible: Boolean,
    userId: null,
  },
  data() {
    return {
      form: {
        companyName: '',
      },
      companyList: [],
      tableData: [],
      companyCodes: [],
      companyNames: [],
    };
  },
  mounted() {
    this.getAllCompany();
  },
  methods: {
    getAllCompany() {
      getAllCompany(this.form).then((res) => {
        this.companyList = res.data.map((item) => {
          return {
            companyNickName: item.companyNickName,
            city: item.city,
            deptName: item.deptName,
            companyCode: item.companyCode,
          };
        });
        this.tableData = this.companyList;
      });
    },
    /**
     * 企业名称筛选表格
     */
    handleFilter() {
      if (!this.form.companyName.length > 0) {
        this.tableData = this.companyList;
      }
      this.tableData = this.tableData.filter((item) =>
        item.companyNickName.toLowerCase().includes(this.form.companyName.toLowerCase()),
      );
    },
    /**
     * 获取选中的表格数据
     * @param val
     */
    handleSelectionChange(val) {
      this.companyCodes = val.map((item) => item.companyCode);
      this.companyNames = val.map((item) => item.companyNickName);
    },
    handleJoinCompany() {
      if (this.companyCodes.length > 0) {
        this.$confirm('确定要加入这些企业吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          joinCompany(this.userId, this.companyCodes).then((res) => {
            if (res.code !== 200) {
              this.$message.success('加入成功');
              this.$emit('updateCompanyCallBack');
              this.handleClose();
            } else {
              this.$message.error(res.msg);
            }
          });
        });
      } else {
        this.$message.error('请先选择要加入的企业');
      }
    },
    /**
     * 关闭弹窗
     */
    handleClose() {
      this.form = {
        companyName: '',
      };
      this.tableData = this.companyList;
      this.$refs.companyTable.clearSelection();
      this.$emit('update:isVisible', false);
      this.$emit('close');
    },
  },
};
</script>
